<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  优质地铁媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">优质地铁媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li style="float: left; margin: 8px;" class="media-model" v-for="n in list1">
      			<dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
      		</li>
      	</ul>
      </div>
    </div>
<!--  一、二线城市  -->
    <div class="yingmoo-metro-city">
      <div class="first-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">一线城市</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>北京</span>
            <span>上海</span>
            <span>广州</span>
            <span>深圳</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="v in list2" class="metro-images1"  width="184px" height="428px" :src="v.imgpath"/>
          <div class="column-center-model">
            <div class="center-model" v-for="v in list3">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>

        <div class="column-last-model">
          <div class="center-model" v-for="v in list4">
            <img  width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
      <div class="section-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">二线城市</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>成都</span>
            <span>重庆</span>
            <span>南京</span>
            <span>天津</span>
            <span>武汉</span>
            <span>西安</span>
          </p>
        </div>
        <div class="column-center">
          <img class="metro-images1" v-for="v in list5"  width="184px" height="428px" :src="v.imgpath" />
          <div class="column-center-model">
            <div class="center-model" v-for="n in list6">
              <img width="184px" height="164px" :src="n.imgpath" />
              <p :title='n.name'>
                {{n.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list7">
            <img  width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
<!--  地铁站内媒体  -->
    <div class="yingmoo-metro-station">
      <div class="first-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">地铁站媒体</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>灯箱</span>
            <span>墙贴</span>
            <span>屏蔽门贴</span>
            <span>扶梯</span>
            <span>电视</span>
            <span>梯顶</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="n in list8" :src="n.imgpath"  width="390px" height="428px" class="metro-images1" />
          <div class="column-center-model">
            <div class="center-model" v-for="v in list9">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list10">
            <img width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
      <div class="section-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">地铁内媒体</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>拉手</span>
            <span>门贴窗</span>
            <span>电视</span>
            <span>海报</span>
            <span>创意包车</span>
            <span>品牌列车</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="n in list11"  width="390px" height="428px" :src="n.imgpath" class="metro-images1" />
          <div class="column-center-model">
            <div class="center-model" v-for="v in list12">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list13">
            <img width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
<!--  客户案例  -->
    <div class="yingmoo-clientele-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">客户案例</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-center">
        <div class="column-center-model">
          <div class="center-model" v-for="v in list14">
            <img width="222px" height="198px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        banners: [{
          imgUrl: require('@/assets/ym-media/metro-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/metro-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/metro-lunbo.png')
        }],
        model: [{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }],
        metro: [{
          metrotext: '深圳地铁6号线超级媒体广告展示'
        }, {
          metrotext: '深圳地铁6号线超级媒体广告展示'
        }, {
          metrotext: '深圳地铁6号线超级媒体广告展示'
        }, {
          metrotext: '深圳地铁6号线超级媒体广告展示'
        }],
        metromodel: [{
          metromodeltext: '深圳地铁6号线超级媒体广告展示'
        }, {
          metromodeltext: '深圳地铁6号线超级媒体广告展示'
        }, {
          metromodeltext: '深圳地铁6号线超级媒体广告展示'
        }],
        metrostation: [{
          stationmodeltext: '深圳地铁6号线超级媒体广告展示'
        }, {
          stationmodeltext: '深圳地铁6号线超级媒体广告展示'
        }],
        clientele:[{
          clienteletext: '媒体名称媒体名称媒体名称'
        },{
          clienteletext: '媒体名称媒体名称媒体名称'
        },{
          clienteletext: '媒体名称媒体名称媒体名称'
        },{
          clienteletext: '媒体名称媒体名称媒体名称'
        },{
          clienteletext: '媒体名称媒体名称媒体名称'
        }],
        list1:[],
	    list2:[],
	    list3:[],
	    list4:[],
	    list5:[],
	    list6:[],
	    list7:[],
	    list8:[],
	    list9:[],
	    list10:[],
	    list11:[],
	    list12:[],
	    list13:[],
	    list14:[],
      }
    },    
    mounted(){		
		this.getList(39,3);//轮播
		this.getList(40,10);//优质地铁媒体
		this.getList(41,1);//一线-推荐
		this.getList(42,4);//一线-右侧图
		this.getList(43,3);//一线底部
		this.getList(44,1);//二线-推荐
		this.getList(45,4);//二线-右侧
		this.getList(46,3);//二线底部
		this.getList(47,1);//站内一
		this.getList(48,2);
		this.getList(49,3);
		this.getList(50,1);//站内二
		this.getList(51,2);
		this.getList(52,3);
		this.getList(53,5);//客户案例
	},
	methods:{
		getList:function(adid ,limit){
	  		this.$http({
				url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
				method: 'JSONP',
			    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				jsonp: 'callbackparam'
			}).then(res => {
				/*console.log(res.data);*/
				if(res.data != null){
					if(adid == 39){this.banners = res.data;}
					if(adid == 40){this.list1 = res.data;}
					if(adid == 41){this.list2 = res.data;}
					if(adid == 42){this.list3 = res.data;}
					if(adid == 43){this.list4 = res.data;}
					if(adid == 44){this.list5 = res.data;}
					if(adid == 45){this.list6 = res.data;}
					if(adid == 46){this.list7 = res.data;}
					if(adid == 47){this.list8 = res.data;}
					if(adid == 48){this.list9 = res.data;}
					if(adid == 49){this.list10 = res.data;}
					if(adid == 50){this.list11 = res.data;}
					if(adid == 51){this.list12 = res.data;}
					if(adid == 52){this.list13 = res.data;}
					if(adid == 53){this.list14 = res.data;}	
				}
			}).catch()
		}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-media {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
    .yingmoo-template {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 291px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow : clip;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;

            color: #999999;
            padding-bottom: 6px;
          }
        }
      }
    }
    .yingmoo-metro-city {
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .first-tier-cities {
        width: 597px;
        height: 715px;
        .column-navbar {
          height: 44px;
          line-height: 44px;
          position: relative;
          &.grey {
            background-color: #e6e6e6;
          }
          .column-title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 170px;
            color: #fbb03b;
            font-size: 18px;
            background-color: #036eb7;
            .column-icon {
              margin-left: 26px;
            }
            .column-arrow {
              position: absolute;
              right: -26px;
              top: 0;
            }
          }
          .column-citys {
            line-height: 44px;
            width: 260px;
            background: none;
            color: #999999;
            float: right;
            span {
              padding-left: 15px;
              padding-right: 15px;
              font-size: 14px;
            }
          }
        }
        .column-center {
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .metro-images1 {
            width: 184px;
          }
          .column-center-model {
            width: 390px;
            height: 428px;
            :nth-child(odd) {
              float: left;
            }
            :nth-child(even) {
              float: right;
            }
            :nth-child(3) {
              margin-top: 21px;
            }
            :nth-child(4) {
              margin-top: 21px;
            }
            .center-model {
              width: 184px;
              height: 203px;
              background-color: white;
              overflow: hidden;
              p {
                width: 184px;
                overflow: hidden;
                text-overflow : clip;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                color: #494949;
              }
            }
          }
        }
        .column-last-model {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .section-tier-cities {
        width: 597px;
        height: 715px;
        .column-navbar {
          height: 44px;
          line-height: 44px;
          position: relative;
          &.grey {
            background-color: #e6e6e6;
          }
          .column-title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 170px;
            color: #fbb03b;
            font-size: 18px;
            background-color: #036eb7;
            .column-icon {
              margin-left: 26px;
            }
            .column-arrow {
              position: absolute;
              right: -26px;
              top: 0;
            }
          }
          .column-citys {
            line-height: 44px;
            width: 300px;
            background: none;
            color: #999999;
            float: right;
            span {
              padding-left: 8px;
              padding-right: 8px;
              font-size: 14px;
            }
          }
        }
        .column-center {
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .metro-images1 {
            width: 184px;
          }
          .column-center-model {
            width: 390px;
            height: 428px;
            :nth-child(odd) {
              float: left;
            }
            :nth-child(even) {
              float: right;
            }
            :nth-child(3) {
              margin-top: 21px;
            }
            :nth-child(4) {
              margin-top: 21px;
            }
            .center-model {
              width: 184px;
              height: 203px;
              background-color: white;
              overflow: hidden;
              p {
                width: 184px;
                overflow: hidden;
                text-overflow : clip;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                color: #494949;
              }
            }
          }
        }
        .column-last-model {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
    }
    .yingmoo-metro-station {
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .first-tier-cities {
        width: 597px;
        height: 715px;
        .column-navbar {
          height: 44px;
          line-height: 44px;
          position: relative;
          &.grey {
            background-color: #e6e6e6;
          }
          .column-title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 170px;
            color: #fbb03b;
            font-size: 18px;
            background-color: #036eb7;
            .column-icon {
              margin-left: 25px;
            }
            .column-arrow {
              position: absolute;
              right: -25px;
              top: 0;
            }
          }
          .column-citys {
            line-height: 44px;
            width: 350px;
            background: none;
            color: #999999;
            float: right;
            span {
              padding-left: 10px;
              padding-right: 10px;
              font-size: 14px;
            }
          }
        }
        .column-center {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .metro-images1 {
            width: 390px;
            height: 428px;
            margin-top: 20px;
          }
          .column-center-model {
            width: 184px;
            height: 428px;
            .center-model {
              width: 184px;
              height: 203px;
              background-color: white;
              margin-top: 21px;
              overflow: hidden;
              p {
                width: 184px;
                overflow: hidden;
                text-overflow: clip;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                color: #494949;
              }
            }
          }
        }
        .column-last-model {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .section-tier-cities {
        width: 597px;
        height: 715px;
        .column-navbar {
          height: 44px;
          line-height: 44px;
          position: relative;
          &.grey {
            background-color: #e6e6e6;
          }
          .column-title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 170px;
            color: #fbb03b;
            font-size: 18px;
            background-color: #036eb7;
            .column-icon {
              margin-left: 25px;
            }
            .column-arrow {
              position: absolute;
              right: -25px;
              top: 0;
            }
          }
          .column-citys {
            line-height: 44px;
            width: 350px;
            background: none;
            color: #999999;
            float: right;
            &:nth-child(2){
              width: 390px;
            }
            span {
              padding-left: 10px;
              padding-right: 10px;
              font-size: 14px;
            }
          }
        }
        .column-center {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .metro-images1 {
            width: 390px;
            height: 428px;
            margin-top: 20px;
          }
          .column-center-model {
            width: 184px;
            height: 428px;
            .center-model {
              width: 184px;
              height: 203px;
              background-color: white;
              margin-top: 21px;
              overflow: hidden;
              p {
                width: 184px;
                overflow: hidden;
                text-overflow: clip;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                color: #494949;
              }
            }
          }
        }
        .column-last-model {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
    }
    .yingmoo-clientele-template {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-center {
        .column-center-model {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .center-model {
            width: 222px;
            height: 240px;
            background-color: white;
            overflow: hidden;
            p {
              width: 222px;
              text-overflow: clip;
              overflow: hidden;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
    }
  }

</style>
